<template>
  <div class="pub-search">
    <div class="left-option">
       <slot name="leftBtn" />
    </div>
    <el-form :model="form" class="search-form" :key="keyValue">
      <!-- 筛选条件<4 一行排列 -->
      <div class="columns-content" v-if="props.searchColumns.length < 4">
        <columns
          v-bind:searchColumns="props.searchColumns"
          v-model:form="form"
        ></columns>
      </div>
      <!-- 筛选条件 = 4  上2下2 排列 -->
      <div class="line-2" v-if="props.searchColumns.length == 4">
        <div class="columns-content">
          <columns
            v-bind:searchColumns="props.searchColumns.slice(0, 2)"
            v-model:form="form"
          ></columns>
        </div>
        <div class="columns-content">
          <columns
            v-bind:searchColumns="props.searchColumns.slice(2, 4)"
            v-model:form="form"
          ></columns>
        </div>
      </div>
      <!-- 筛选条件 = 5 上2下3 -->
      <div class="line-2" v-if="props.searchColumns.length == 5">
        <div class="columns-content">
          <columns
            ref="columnsRef1"
            @changeSelect="changeSelect1"
            v-bind:searchColumns="props.searchColumns.slice(0, 2)"
            v-model:form="form"
          ></columns>
        </div>
        <div class="columns-content">
          <columns
            ref="columnsRef2"
            @changeSelect="changeSelect2"
            v-bind:searchColumns="props.searchColumns.slice(2, 5)"
            v-model:form="form"
          ></columns>
        </div>
      </div>
      <!-- 筛选条件 = 6 上3下3 -->
      <div class="line-2" v-if="props.searchColumns.length == 6">
        <div class="columns-content">
          <columns
            ref="columnsRef1"
            @changeSelect="changeSelect1"
            v-bind:searchColumns="props.searchColumns.slice(0, 3)"
            v-model:form="form"
          ></columns>
        </div>
        <div class="columns-content">
          <columns
            ref="columnsRef2"
            @changeSelect="changeSelect2"
            v-bind:searchColumns="props.searchColumns.slice(3, 6)"
            v-model:form="form"
          ></columns>
        </div>
      </div>
      <!-- 更多筛选条件 -->
      <div
        class="line-2"
        v-if="searchColumns.length >= 7 && searchColumns.length < 11"
      >
        <div class="columns-content">
          <columns
            ref="columnsRef1"
            @changeSelect="changeSelect1"
            v-bind:searchColumns="props.searchColumns.slice(0, 3)"
            v-model:form="form"
          ></columns>
        </div>
        <div class="columns-content">
          <columns
            ref="columnsRef2"
            @changeSelect="changeSelect2"
            v-bind:searchColumns="props.searchColumns.slice(3, 6)"
            v-model:form="form"
          ></columns>
        </div>
        <transition name="fade-slide" mode="out-in">
          <div class="columns-content" v-show="showMore">
            <columns
              v-model:form="form"
              :search-columns="searchColumns.slice(6, 9)"
            ></columns>
          </div>
        </transition>
        <transition name="fade-slide" mode="out-in">
          <div class="columns-content" v-show="showMore">
            <columns
              v-model:form="form"
              :search-columns="searchColumns.slice(9, 12)"
            ></columns>
          </div>
        </transition>
      </div>
      <!-- 筛选条件 = 6 上3下3 -->
    </el-form>

    <div class="right-option" v-if="!props.noColumns">
      <div v-if="props.searchColumns.length > 6" class="expand-toogle-btn">
        <el-button link @click="expand">
          {{ showMore ? '收起' : '展开' }}
          <el-icon>
            <ArrowUp v-if="showMore" />
            <ArrowDown v-else />
          </el-icon>
        </el-button>
      </div>
      <div :class="props.searchColumns.length>3?'mt-10px':''" v-if="showSearchBtn">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="default" @click="resetSearchForm">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import _ from 'lodash-es'
import columns from './columns.vue'

const props = defineProps({
  searchForm: {
    type: Object,
    default() {
      return {}
    }
  },
  searchColumns: {
    type: Array,
    default() {
      return []
    }
  },
  maskAppendTo: {
    type: String,
    default: ''
  },
  noColumns: {
    type: Boolean,
    default: false
  },
  showSearchBtn:{
    type:Boolean,
    default:true
  }
})
const columnsRef1 = ref(null)
const columnsRef2 = ref(null)
const showMore = ref(false)
const emit = defineEmits([
  'search',
  'update:searchForm',
  'update:searchColumns',
  'expand',
  'changeSelect1',
  'changeSelect2'
])

// const 初始化的查询条件
const defaultSearchColumns = _.cloneDeep(props.searchColumns)
const defaultSearchFom = props.searchForm
// 展开更多筛选条件
const drawerShow = ref(false)
const maskHeight = ref(100)
const expand = () => {
  showMore.value = !showMore.value
}

const changeSelect1 = obj => {
  emit('changeSelect1', obj)
}
const changeSelect2 = obj => {
  emit('changeSelect2', obj)
}
// 查询事件
const search = () => {
  form.value.pageSize = props.searchForm.pageSize
  form.value.pageNum = 1
  emit('update:searchForm', { ...props.searchForm, ...toRefs(form.value) })
  emit('search')
  // drawerShow.value = false
}

// 重置表单事件
const keyValue = ref(new Date().getTime())
const resetSearchForm = () => {
  emit('update:searchColumns', defaultSearchColumns)
  defaultSearchColumns.map(item => {
    if (
      item.el === 'DateRange' ||
      item.el === 'AgeRange' ||
      item.el === 'YearRangeSelect' ||
      item.el === 'areaTradeUnion'
    ) {
      form.value[item.bindBegin] = item.defaultValue[0]
      form.value[item.bindEnd] = item.defaultValue[1]
    } else if (item.el === 'moneyRangeSelect'||
      item.el === 'inputRange') {
      form.value[item.bindBegin] = ''
      form.value[item.bindEnd] = ''
    } else {
      form.value[item.bind] = item.defaultValue
    }
  })
  // form.value.pageSize = defaultSearchFom.pageSize
  form.value.pageNum = defaultSearchFom.pageNum
  keyValue.value = new Date().getTime()

  emit('update:searchForm', { ...props.searchForm, ...toRefs(form.value) })
  emit('search', form.value)
  // drawerShow.value = false
}

const form = ref({})
onMounted(() => {
  props.searchColumns.map(item => {
    if (
      item.el === 'DateRange' ||
      item.el === 'AgeRange' ||
      item.el === 'YearRangeSelect' ||
      item.el === 'areaTradeUnion'
    ) {
      form.value[item.bindBegin] = item.defaultValue[0]
      form.value[item.bindEnd] = item.defaultValue[1]
    } else if (item.el === 'moneyRangeSelect'||
      item.el === 'inputRange') {
      form.value[item.bindBegin] = ''
      form.value[item.bindEnd] = ''
    } else {
      form.value[item.bind] = item.defaultValue
    }
  })
  emit('update:searchForm', { ...toRefs(form.value), ...toRefs(defaultSearchFom) })
})
defineExpose({ columnsRef2: columnsRef2, columnsRef1: columnsRef1 })
</script>
<style lang="scss" scoped>
.pub-search {
  display: flex;
  position: relative;
  .search-form {
    flex: 1;
    display: block;

    .el-form-item {
      margin-bottom: 10px;
    }
    :deep(.el-input) {
      width: 230px;
    }
    .age-range-select {
      width: 230px;
      display: inline-flex;
      align-items: center;
      :deep(.split) {
        font-size: 12px;
        color: #777;
        display: block;
        flex: 1;
        text-align: center;
      }
      :deep(.el-input-number) {
        width: 80px;
      }
    }
    :deep(.el-select) {
      width: 230px;
    }
    :deep(.el-cascader) {
      width: 230px;
    }
  }
  .left-option {
    display: flex;
    align-items: flex-end;
    padding-bottom: 12px;
  }
  .right-option {
    padding-left: 10px;
    padding-bottom: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
.columns-content {
  display: flex;
  justify-content: flex-end;
}
.line-2 {
  .left-option,
  .right-option {
    align-items: flex-end;
    position: relative;
  }
  .expand-toogle-btn {
    // position: absolute;
    // top: 2px;
    // left: 5px;
    margin-left: -8px;
  }
}

.mask-content {
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: -20px;
  top: 84px;
  width: calc(100% + 40px);
  z-index: 1000000;
  .more-columns-content {
    &:first-child {
      border-top: 1px solid rgba(1, 21, 59, 0.08);
    }
    background: #fff;
    padding-top: 10px;
    padding-right: 124px;
  }
}

.task-enter-from,
.task-leave-to {
  height: 0 !important;
}
.task-enter-active,
.task-leave-active {
  transition: all 0.1s linear;
}

.container-more .more-columns-content {
  padding-right: 133px !important;
}
</style>
